<template>
  <div class="model-list">
    <a-spin :spinning="loading">
      <div v-if="data.length === 0" class="empty-state">
        <a-empty
          description="暂无模型数据"
          :image="require('@/assets/background.svg')"
        >
          <a-button type="primary" @click="$emit('refresh')">
            刷新数据
          </a-button>
        </a-empty>
      </div>

      <div v-else class="model-grid">
        <div
          v-for="model in data"
          :key="model.id"
          class="model-card"
          @click="handleModelClick(model)"
        >
          <div class="card-header">
            <div class="model-info">
              <h3 class="model-name">{{ model.modelName }}</h3>
              <p class="model-code">{{ model.modelCode }}</p>
            </div>
            <div class="model-status">
              <a-badge
                :status="getStatusType(model.status)"
                :text="getStatusText(model.status)"
              />
            </div>
          </div>

          <div class="card-content">
            <p class="model-description">{{ model.description || '暂无描述' }}</p>

            <div class="model-meta">
              <div class="meta-item">
                <a-icon type="user" />
                <span>{{ model.creator }}</span>
              </div>
              <div class="meta-item">
                <a-icon type="clock-circle" />
                <span>{{ formatTime(model.createTime) }}</span>
              </div>
            </div>
          </div>

          <div class="card-actions">
            <a-button
              type="link"
              size="small"
              @click.stop="handleEdit(model)"
            >
              版本更新
            </a-button>
            <a-button
              type="link"
              size="small"
              @click.stop="handleManage(model)"
            >
              权限管理
            </a-button>
            <a-dropdown :trigger="['click']" @click.stop>
              <a-button type="link" size="small">
                更多
                <a-icon type="down" />
              </a-button>
              <a-menu slot="overlay">
                <a-menu-item @click="handleView(model)">
                  <a-icon type="eye" />
                  查看详情
                </a-menu-item>
                <a-menu-item @click="handleCopy(model)">
                  <a-icon type="copy" />
                  复制模型
                </a-menu-item>
                <a-menu-divider />
                <a-menu-item @click="handleDelete(model)" class="danger">
                  <a-icon type="delete" />
                  删除模型
                </a-menu-item>
              </a-menu>
            </a-dropdown>
          </div>
        </div>
      </div>

      <!-- 分页 -->
      <div v-if="data.length > 0" class="pagination-wrapper">
        <a-pagination
          :current="currentPage"
          :total="total"
          :page-size="pageSize"
          :show-size-changer="true"
          :show-quick-jumper="true"
          :show-total="(total, range) => `共 ${total} 条记录，第 ${range[0]}-${range[1]} 条`"
          @change="handlePageChange"
          @showSizeChange="handleSizeChange"
        />
      </div>
    </a-spin>
  </div>
</template>

<script>
import moment from 'moment'

export default {
  name: 'ModelList',
  props: {
    data: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 100
    }
  },
  methods: {
    getStatusType (status) {
      const statusMap = {
        active: 'processing',
        inactive: 'default',
        error: 'error',
        success: 'success'
      }
      return statusMap[status] || 'default'
    },

    getStatusText (status) {
      const statusMap = {
        active: '运行中',
        inactive: '已停止',
        error: '异常',
        success: '正常'
      }
      return statusMap[status] || '未知'
    },

    formatTime (time) {
      return moment(time).format('YYYY-MM-DD HH:mm')
    },

    handleModelClick (model) {
      this.$emit('model-click', model)
    },

    handleEdit (model) {
      this.$emit('edit', model)
    },

    handleManage (model) {
      this.$emit('manage', model)
    },

    handleView (model) {
      this.$emit('view', model)
    },

    handleCopy (model) {
      this.$emit('copy', model)
    },

    handleDelete (model) {
      this.$confirm({
        title: '确认删除',
        content: `确定要删除模型 "${model.modelName}" 吗？此操作不可恢复。`,
        okText: '确认',
        cancelText: '取消',
        okType: 'danger',
        onOk: () => {
          this.$emit('delete', model)
        }
      })
    },

    handlePageChange (page) {
      this.currentPage = page
      this.$emit('page-change', { page, pageSize: this.pageSize })
    },

    handleSizeChange (current, size) {
      this.pageSize = size
      this.currentPage = 1
      this.$emit('page-change', { page: 1, pageSize: size })
    }
  }
}
</script>

<style lang="less" scoped>
.model-list {
  .empty-state {
    padding: 60px 0;
    text-align: center;
  }

  .model-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
  }

  .model-card {
    background: white;
    border: 1px solid #e8eaed;
    border-radius: 12px;
    padding: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      transform: scaleX(0);
      transition: transform 0.3s ease;
    }

    &:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
      border-color: #667eea;

      &::before {
        transform: scaleX(1);
      }
    }

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 16px;

      .model-info {
        flex: 1;

        .model-name {
          font-size: 18px;
          font-weight: 600;
          color: #1f2937;
          margin: 0 0 4px 0;
          line-height: 1.4;
        }

        .model-code {
          font-size: 14px;
          color: #6b7280;
          font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
          background: #f3f4f6;
          padding: 2px 8px;
          border-radius: 4px;
          display: inline-block;
          margin: 0;
        }
      }

      .model-status {
        :deep(.ant-badge-status-text) {
          font-weight: 500;
        }
      }
    }

    .card-content {
      margin-bottom: 20px;

      .model-description {
        color: #4b5563;
        font-size: 14px;
        line-height: 1.6;
        margin-bottom: 16px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .model-meta {
        display: flex;
        gap: 16px;

        .meta-item {
          display: flex;
          align-items: center;
          gap: 6px;
          font-size: 13px;
          color: #6b7280;

          .anticon {
            font-size: 12px;
          }
        }
      }
    }

    .card-actions {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 16px;
      border-top: 1px solid #f3f4f6;

      .ant-btn-link {
        padding: 0;
        height: auto;
        font-size: 13px;
        color: #667eea;

        &:hover {
          color: #4f46e5;
        }
      }

      :deep(.ant-dropdown-trigger) {
        .ant-btn-link {
          color: #6b7280;

          &:hover {
            color: #4b5563;
          }
        }
      }
    }
  }

  .pagination-wrapper {
    display: flex;
    justify-content: center;
    padding: 24px 0;

    :deep(.ant-pagination) {
      .ant-pagination-item {
        border-radius: 6px;

        &.ant-pagination-item-active {
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          border-color: #667eea;
        }
      }

      .ant-pagination-prev,
      .ant-pagination-next {
        border-radius: 6px;
      }
    }
  }
}

:deep(.ant-menu-item.danger) {
  color: #ef4444;

  &:hover {
    background-color: #fef2f2;
    color: #dc2626;
  }
}
</style>
